import React,{useState,useEffect,useLayoutEffect,useMemo,useCallback} from "react"

const Hook = ()=>{
  const [num,setNum] = useState(0)
  const [name,setName] = useState("不知道")
  const handelAdd = ()=>{
    setNum(num+1)
  } 
  const handleClick = ()=>{
    setName("react")
  }
  useEffect(()=>{
    console.log("页面第一次执行")
  },[num])
  useLayoutEffect(()=>{
    console.log("懒加载用于操作DOM的缓解")
  },[])
  // 缓存状态,如果状态没有更新将不会更新视图层的ui
  const text = useMemo(()=>{
    console.log("useMemo")
    return name
  },[name])
  // 用于函数的缓存状态
  const callBack = useCallback(()=>{},[])


  return (
    <>
      <h3>this is hook {num}</h3>
      <button onClick={handelAdd}>addbtn</button>
      <h4>这是一个啥{text}</h4>
      <button onClick={handleClick}>gaibian</button>
    </>
  )
}

export default Hook